<template>
  <el-card class="box-card">
    <h2 class="title">订单详细信息</h2>
    <el-form
      ref="orderFormRef"
      :model="orderForm"
      label-width="80px"
    >
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-input type="hidden" v-model="orderForm.id"></el-input>
          <el-form-item label="收货人" prop="consignee">
            <el-input v-model="orderForm.consignee"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="收货地址" prop="address">
            <el-input v-model="orderForm.address"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="联系方式" prop="contact">
            <el-input v-model="orderForm.contact"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="提货方式" prop="pickupWay">
            <el-input v-model="orderForm.pickupWay"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="支付方式" prop="payWay">
            <el-input v-model="orderForm.payWay"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="订单金额" prop="originalPrice">
            <el-input v-model="orderForm.originalPrice"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="colSize" :offset="offsetSize">
          <el-form-item label="订单状态" prop="status">
            <el-input v-model="orderForm.status"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-table fit :data="orderDetails" stripe style="width: 100%">
          <el-table-column align="center" label="图片" width="120">
            <template slot-scope="scope">
              <el-image style="height: 100px" :src="baseUrl + scope.row.file">
              </el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="goodsName" label="商品名称">
          </el-table-column>
          <el-table-column align="center" prop="brandName" label="品牌">
          </el-table-column>
          <el-table-column align="center" prop="goodsPrice" label="价格">
          </el-table-column>
          <el-table-column align="center" prop="amount" label="数量">
          </el-table-column>
        </el-table>
      </el-row>
      <el-row v-if="handleType !== 'view'">
        <el-col :span="colSize" :offset="8">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">提 交</el-button>
            <el-button @click="onCancel">取 消</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row v-if="handleType === 'view'">
        <el-col :span="colSize" :offset="9">
          <el-form-item>
            <el-button type="primary" @click="onCancel" style="margin-top: 20px">返 回</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </el-card>
</template>

<script>
import {api_orderInfo} from "../../api/order";
export default {
  data() {
    return {
      baseUrl: 'http://localhost:88/upload/',
      handleType: 'add',
      colSize: 18,
      offsetSize: 3,
      orderForm: {
        id: null,
        consignee: null,
        address: null,
        contact: null,
        pickupWay: null,
        payWay: null,
        originalPrice: null,
        status: null,
      },
      orderDetails:[],
    }
  },
  created() {
    this.getHandleType()
  },
  mounted() {
    this.getInfo()
  },
  methods: {
    async getInfo() {
      let id = this.$route.query.id
      if (id) {
        const { data: res } = await api_orderInfo({
          id: id,
        })
        this.orderForm = res.data.order
        this.orderDetails = res.data.details
        this.orderForm.status = this.statusFilter(this.orderForm.status)
        this.orderForm.pickupWay = this.pickupWayFilter(this.orderForm.pickupWay)
        console.log(this.orderDetails)
      }
    },
    pickupWayFilter(value){
      let text = '自提'
      if(value==='deliver'){
        text = '配送'
      }
      return text;
    },
    statusFilter(value) {
      //上架 售空 下架
      let text = ''
      switch(value){
        case 'CANCEL':
          text = '已取消';
          break;
        case 'PAID':
          text = '已支付';
          break;
        case 'STOCKUP':
          text = '已备货';
          break;
        case 'SEND':
          text = '已送出';
          break;
        case 'FINISH':
          text = '已完成';
          break;
        default:
          break;
      }
      return text
    },
    getHandleType() {
      this.handleType = this.$route.query.handleType
    },
    onSubmit() {
    },
    onCancel() {
      this.$router.push('/order/orderList')
    },
  },
}
</script>

<style scoped>
.box-card {
  width: 60%;
  margin: auto;
}
.title {
  text-align: center;
  margin-bottom: 40px;
  font-size: 40px;
}
</style>
